<!--
 * @Description: {{ByRuin}}
 * @Version: 2.0
 * @Author: Ruin 🍭
 * @Date: 2021-12-28 14:55:35
 * @LastEditors: 刘引
 * @LastEditTime: 2022-01-04 16:32:47
-->
<template>
  <div class="about">
    <div class="w">
      <div class="container" v-if="this.$store.state.isChange == false">
        <div class="left">
          <div class="title">
            <i>About us</i>
            <h3>关于我们</h3>
          </div>
          <div class="content">
            <p>淘芯电子管理成员在半导体分销领域有超过12年的从业经验，来自于美国、台湾功率半导体龙头企业，销售团队在亚太地区市场有超过10年销售经验。淘芯电子专注于电子产品电源部分的半导体分立器件销售，设计领域包括PC主板、手机管理电源、马达、汽车电子、家用电器、绿色能源及工控领域，目前代理的品牌有： DIODES（美台）APEC（富鼎先进）、ANALOGPOWER(美商亚柏) Lite-On、Infineon、Vishay、AOS、Panasonic、AVX钽电容、GMT（致新科技)等...</p>
          </div>
          <div class="btn-more">
            <a href="tencent://message/?uin=2355608068&Site=Sambow&Menu=yes">查看更多&nbsp;+</a>
          </div>
        </div>
        <div class="right">
          <ul>
            <li>
              <img src="../../../assets/img/home/introduce01.png" />
            </li>
            <li>
              <img src="../../../assets/img/home/introduce02.png" />
            </li>
            <li>
              <img src="../../../assets/img/home/introduce03.png" />
            </li>
          </ul>
        </div>
      </div>
      <div class="container" v-if="this.$store.state.isChange">
        <div class="left">
          <div class="title">
            <i>About us</i>
          </div>
          <div class="content" style="margin-top:10px">
            <p>The members of Taoxin Electronics have more than 12 years of experience in the field of semiconductor distribution. They come from leading power semiconductor companies in the United States and Taiwan. The sales team has more than 10 years of sales experience in the Asia-Pacific market. Taoxin Electronics focuses on the sales of semiconductor discrete devices in the power supply of electronic products, covering areas including PC motherboards, mobile phone power management, motors, automotive electronics, household appliances, green energy resources and industrial control. The current brands are: DIODES , APEC , GMT , ANALOGPOWER, Lite-On, Infineon, Vishay, AOS, Panasonic, AVX tantalum capacitors, etc...</p>
          </div>
          <div class="btn-more" style="margin-top:10px">View more&nbsp;+</div>
        </div>
        <div class="right">
          <ul>
            <li>
              <img src="../../../assets/img/home/introduce01.png" />
            </li>
            <li>
              <img src="../../../assets/img/home/introduce02.png" />
            </li>
            <li>
              <img src="../../../assets/img/home/introduce03.png" />
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script></script>
<style lang="scss" scoped>
.about {
  margin-top: 70px;
  padding-bottom: 70px;
}
.container {
  display: flex;
  justify-content: space-between;
  height: 390px;
  // background-color: pink;
  .left {
    flex: 1.3;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin-right: 35px;
    .title {
      i {
        font-size: 28px;
        font-weight: normal;
        font-style: italic;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #0c7fea;
      }
      h3 {
        font-weight: normal;
        color: #333333;
        margin: 15px 0;
      }
    }
    .content {
      text-align: left;
      p {
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 24px;
        color: #666666;
      }
    }

    .btn-more {
      width: 170px;
      height: 40px;
      color: #666666;
      border: solid 1px #999999;
      text-align: center;
      cursor: pointer;
      line-height: 40px;
      a {
        width: 170px;
        height: 40px;
        display: block;
        color: #666666;
      }
      &:hover {
        background-color: #327fe3;
        transition: all 0.2s;
        color: #ffffff;
        a {
          color: #ffffff;
        }
      }
    }
  }
  .right {
    flex: 3;
    ul {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      li {
        img {
          width: 200px;
          height: 390px;
          margin-left: 10px;
          margin-right: 10px;
        }
      }
    }
  }
  // background-color: red;
}
</style>
